// 首页的样式
.index-content {
  // body
  .body {
    max-width: 1200px;
    margin: 100px auto 0px;
  }
  // 轮播图
  .carousel {
    max-height: 550px;
    margin: 1rem 0;
    border-radius: 20px;
    overflow: hidden;
    // border: 1px solid #333;
  }
  // 2栏布局
  .two-col {
    // 左侧
    .left {
      // 标题
      .ant-list-header {
        font-size: 1.4rem;
        letter-spacing: 0.1rem;
        font-weight: 600;
      }
      // 每项
      .ant-list-item {
        margin-bottom: 2rem;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
      }
      // 内容
      .article-content {
        img {
          width: 100%;
        }
        .article-text {
          padding: 10px;
          text-align: left;
          h2 {
            letter-spacing: 2px;
          }
          p {
            margin: 15px 0;
          }
          .icon {
            display: flex;
            justify-content: flex-end;
            i {
              margin: 0 10px;
            }
          }
        }
      }
    }
    // 右侧
    .right {
      height: auto;
      // up信息
      .up-data {
        margin-bottom: 20px;
        h2 {
          padding: 12px 0;
        }
        // 卡片内容
        .ant-card-body {
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: center;
          // 头像
          img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 0 auto;
          }
          p {
            margin: 10px 0;
            font-size: 18px;
          }
          // 账号
          .accounts {
            a {
              display: inline-block;
              width: 50px;
              height: 50px;
              border-radius: 50%;
              border: 1px solid #333;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
      // 广告位
      .advertising {
        h2 {
          padding: 12px 0;
          letter-spacing: 2px;
        }
      }
    }
  }
}

// 媒体查询
// 小于 1200px 时，轮播图的左右外边距变小
@media screen and (max-width: 1200px) {
  .index-content {
    .body {
      // 轮播图
    .carousel {
      width: 100%;
      height: auto;
      padding: 1rem 1rem 0;
      .ant-carousel {
        overflow: hidden;
        border-radius: 10px;
      }
    }
    // 2栏布局
    .ant-row {
      padding: 0 1.5rem;
    }
    }
  }
}
